<template>
  <div class="width-100-per height-100-per">
    <div class="layout-right-center width-100-per margin-bottom-10-px">
      <div class="layout-side margin-right-10-px">
        <span class="margin-right-5-px">标题</span>
        <a-input class="formInput margin-right-5-px"></a-input>
      </div>
      <div class="layout-side margin-right-10-px">
        <span class="margin-right-5-px">时间</span>
        <a-range-picker style="width: 250px" @change="onChangeTime"/>
      </div>
      <a-button-group>
        <a-button icon="search" @click="selectRepaired">查询</a-button>
        <a-button icon="reload" @click="removeRepaired">清空</a-button>
      </a-button-group>
    </div>
    <div class="width-100-per">

      <!--    :rowSelection="rowSelection"-->
      <a-table
        :locale="{emptyText:'暂无数据'}"
        :rowKey="record => record.key"
        :columns="columns"
        :dataSource="repairedData"
        :pagination="paginationUser"
      >
      <span slot="tags" slot-scope="tags">
        <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
      </span>
        <span slot="action" slot-scope="text, record">
        <a @click="onViewClick(record.key)">详情</a>
          <template v-if="userType === '2'">
            <a-divider type="vertical"/>
            <a-popconfirm title="确定通过审核？" placement="topRight" @confirm="onEditClick(record.key,0)">
              <a>审核</a>
            </a-popconfirm>
            <a-divider type="vertical"/>
            <a @click="onEditClick(record.key,1)">驳回</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除该设备？" placement="topRight" @confirm="onDeleteClick(record.key)">
              <a>删除</a>
            </a-popconfirm>
          </template>

      </span>
      </a-table>
    </div>
    <a-modal
      title="维修详情"
      width="900px"
      :visible="modalPersonnel"
      @ok="okPersonnel"
      @cancel="cancelPersonnel"
      okText="确认"
      :footer="footers"
      cancelText="重置">
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="loading" @click="okPersonnel">确认</a-button>
      </template>
      <div style="display: flex;justify-content: space-around">

        <div class="layout-left-top padding-10-px" style="width: 800px">
          <div class="layout-left-top" style="width: 350px;">
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">具体楼栋</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repCode"></a-input>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修人员</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repStarId"></a-input>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修区域</span>
              <a-select :disabled="disabled" placeholder="" class="formInput"  v-model="repairData.loctionId">
                <a-select-option value="999">请选择</a-select-option>
                <a-select-option v-for="(i,index) in repLocationData" :value="i.key" :key="index">{{i.title}}</a-select-option>
              </a-select>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修类别</span>
              <a-select :disabled="disabled" placeholder="" class="formInput"  v-model="repairData.repTypeId">
                <a-select-option value="999">请选择</a-select-option>
                <a-select-option v-for="(i,index) in repTypeIdData" :value="i.key" :key="index">{{i.title}}</a-select-option>
              </a-select>
            </div>
          </div>
          <div class="layout-left-top" style="width: 400px">
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">联系电话</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repStarPId"></a-input>
            </div>
            <div class="layout-side margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修时间</span>
              <a-input :disabled="disabled" class="formInput" v-model="repairData.repStatTime"></a-input>
            </div>
            <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
              <span class="formSpan">报修备注</span>
              <a-textarea :disabled="disabled" class="" style="width: 321px" placeholder="报修备注" :rows="3" v-model="repairData.repRemarkStar"/>
            </div>
          </div>
          <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
            <span class="formSpan">报修图片</span>
            <div :disabled="disabled" style="width: 700px;height: 400px;overflow: auto;border: 1px solid rgba(0, 0, 0, 0.65)" class="layout-left-top">
              <img v-for="(i,index) in repairData.repImgStar" :key="index" class="imgS" :src="i"/>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal
      title="驳回原因"
      :visible="visible"
      @ok="handleOks"
      :confirmLoading="confirmLoading"
      @cancel="handleCancels"
    >
      <div class="layout-left-top margin-bottom-10-px margin-top-10-px">
        <div class="formSpan"><span style="color: #f5222d">*&nbsp;</span>驳回原因</div>
        <a-textarea class="" style="width: 390px;" placeholder="驳回原因" :rows="6" v-model="messages"/>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import {Input, Button, Table, Tag, Icon, Divider, Popconfirm, DatePicker,Modal,Select} from 'ant-design-vue'
  import {indexConfig} from "./IndexConfig";
  import {pagination} from "../../lib/utils";

  export default {
    name: "InRepair",
    components: {
      ASelect:Select,
      ASelectOption:Select.Option,
      ARangePicker: DatePicker.RangePicker,
      ATable: Table,
      ATag: Tag,
      ADivider: Divider,
      AIcon: Icon,
      AButton: Button,
      AButtonGroup: Button.Group,
      AInput: Input,
      APopconfirm: Popconfirm,
      AModal:Modal,
      ATextarea:Input.TextArea
    },
    data() {
      return {
        repairID:'',
        repStarIds:'',
        messages:null,
        userType:'0',
        disabled:true,
        visible: false,
        confirmLoading: false,
        columns:indexConfig.columns01,
        repLocationData:indexConfig.repLocationData,
        repTypeIdData:indexConfig.repTypeIdData,
        footers:this.slot,
        repairData:{
          repCode:'169002303',
          repStarId:'张三',
          repStarPId:'15736611434',
          // repImgStar:[],
          repImgStar:["",
            "",
            ""],
          repStatTime:'2019-09-22/9:00',
          repRemarkStar:'无',
          repTypeId:1,
          loctionId:1
        },
        loading:false,
        modalPersonnel:false,
        repairedData:[],
        paginationUser: pagination(this.changePage,this.showSizeChange),
      }
    },
    mounted(){
      this.userType = JSON.parse(this.$store.getters.currentUser).type;
      this.showTable()
      console.log('4')
    },
    methods: {
      //初始加载表格
      showTable(){
        const that = this;
        that.repairedData = [];
        that.$apollo.query({
          query:require('../../graphql/repair/query/findAllByRepState.gql'),
          variables:{repState:"0"},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findAllByRepState = data.data.findAllByRepState;
          for(let i in findAllByRepState){
            const repTypes=[];
            const loctions = [];
            for(let j in that.repTypeIdData){
              if(findAllByRepState[i].repTypeId === that.repTypeIdData[j].key){
                repTypes.push(that.repTypeIdData[j].title);
              }
            }
            for(let j in that.repLocationData){
              if(findAllByRepState[i].loctionId === that.repLocationData[j].key){
                loctions.push(that.repLocationData[j].title);
              }
            }
            that.repairedData.push({
              key:findAllByRepState[i].id,
              title:findAllByRepState[i].repCode,
              repTypeId:repTypes[0],
              loctionId:loctions,
              repStatTime:findAllByRepState[i].repStatTime,
            })
          }

        }).catch((error)=>{
          console.log(error);
        })
      },
      //驳回确认
      handleOks(e) {
        console.log(e)
        const that = this;
        if(that.messages === ''|| that.messages === undefined ||that.messages === null){
          that.$message.error('请填写驳回原因！');
          return;
        }
        const newRepair={
          id:that.repairID,
          loctionId:that.repairData.loctionId,
          materialRecordId:[],
          repCode:that.repairData.repCode,
          repEndId:'',
          repEndTime:'',
          repImgEnd:"",
          repImgStar:"",
          repRemarkEnd:'',
          repRemarkStar:that.repairData.repRemarkStar,
          repStarId:that.repStarIds,
          repStarIdP:that.repairData.repStarPId,
          repStatTime:that.repairData.repStatTime,
          repState:'3',
          repTypeId:that.repairData.repTypeId,
          message:that.messages,
        }
        that.$apollo.mutate({
          mutation:require('../../graphql/repair/mutation/saveRepair.gql'),
          variables:{entity:newRepair},
        }).then((data)=>{
          that.confirmLoading = true;
          setTimeout(() => {
            that.visible = false;
            that.confirmLoading = false;
            that.showTable();
            that.$message.success("驳回成功！");
          }, 50);
        }).catch(error=>{
          that.$message.success("驳回失败！");
          console.log(error);
        })
      },
      findStarID(id){
        const that = this;
        that.$apollo.query({
          query:require('../../graphql/repair/query/findRepairById.gql'),
          variables:{id},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findRepairById=data.data.findRepairById;
          this.$apollo.query({
            query:require('../../graphql/army/query/findUserById.gql'),
            variables:{id:findRepairById.repStarId}
          }).then((datas)=>{
            const findUserById = datas.data.findUserById;
            that.repairData={
              repCode:findRepairById.repCode,
              repStarId:findUserById.name,
              repStarPId:findRepairById.repStarIdP,
              // repImgStar:findRepairById.repImgStar,
              // repImgStar:["",
              //   "",
              //   ""],
              repImgStar:findRepairById.repImgStar,
              repStatTime:findRepairById.repStatTime,
              repRemarkStar:findRepairById.repRemarkStar,
              repTypeId:findRepairById.repTypeId,
              loctionId:findRepairById.loctionId
            };
            that.repStarIds = findRepairById.repStarId;
          }).catch((error)=>{
            console.log(error)
          })
        }).catch(error=>{
          console.log(error)
        })
      },
      handleCancels(e) {
        this.visible = false;
        this.messages = '';
      },
      onViewClick(id) {
        const that = this;
        that.findStarID(id);
        that.modalPersonnel = true;
      },
      //审核
      onEditClick(id,i) {
        const that =this;
        that.$apollo.query({
          query:require('../../graphql/repair/query/findRepairById.gql'),
          variables:{id},
          fetchPolicy:'no-cache'
        }).then(data=>{
          const findRepairById=data.data.findRepairById;
          this.$apollo.query({
            query:require('../../graphql/army/query/findUserById.gql'),
            variables:{id:findRepairById.repStarId},
            fetchPolicy:'no-cache'
          }).then((datas)=>{
            console.log('*')
            const findUserById = datas.data.findUserById;
            console.log(findRepairById.repImgStar)
            that.repairData={
              repCode:findRepairById.repCode,
              repStarId:findUserById.name,
              repStarPId:findRepairById.repStarIdP,
              // repImgStar:findRepairById.repImgStar,
              repImgStar:["",
                "",
                ""],

              repStatTime:findRepairById.repStatTime,
              repRemarkStar:findRepairById.repRemarkStar,
              repTypeId:findRepairById.repTypeId,
              loctionId:findRepairById.loctionId
            };
            that.repStarIds = findRepairById.repStarId;
            if(i === 0){
              const newRepair={
                id:id,
                loctionId:that.repairData.loctionId,
                materialRecordId:[],
                repCode:that.repairData.repCode,
                repEndId:'',
                repEndTime:'',
                repImgEnd:"",
                repImgStar:"",
                repRemarkEnd:'',
                repRemarkStar:that.repairData.repRemarkStar,
                repStarId:that.repStarIds,
                repStarIdP:that.repairData.repStarPId,
                repStatTime:that.repairData.repStatTime,
                repState:'1',
                repTypeId:that.repairData.repTypeId,
                message:'',
              }
              console.log(newRepair)
              that.$apollo.mutate({
                mutation:require('../../graphql/repair/mutation/saveRepair.gql'),
                variables:{entity:newRepair},
              }).then((data)=>{
                that.showTable();
                that.$message.success("审核成功！");
              }).catch(error=>{
                console.log(error);
              })
            }else {
              //驳回
              that.repairID = id;
              that.visible = true;
            }
          }).catch((error)=>{
            console.log(error)
          })
        }).catch(error=>{
          console.log(error)
        })

      },
      //删除
      onDeleteClick(id) {
        this.$apollo.mutate({
          mutation:require('../../graphql/repair/mutation/deleteRepairById.gql'),
          variables:{id:id}
        }).then((data)=>{
          this.showTable();
          this.$message.success("删除成功！")
        }).catch((error)=>{
          console.log(error)
        })
      },
      //人员弹框确认按钮
      okPersonnel(e) {
        this.loading = true;
        setTimeout(() => {
          this.modalPersonnel = false;
          this.loading = false;
        }, 50);
      },
      //人员弹框右上角X按钮
      cancelPersonnel(e) {
        this.modalPersonnel = false;
        this.handleReset();
      },
      //人员弹框重置按钮
      handleReset() {
        this.repairData={
          repCode:'',
          repStarId:'',
          repStarPId:'',
          // repImgStar:[],
          repImgStar:[""],
          repStatTime:'',
          repRemarkStar:'',
          repTypeId:1,
          loctionId:1
        };
      },
      //选择每页多少条后回调
      showSizeChange(current, pageSize) {
        this.changePage(current, pageSize)
      },
      //点击页码回调
      changePage(current, pageSize) {
        const that = this;
        that.paginationUser.defaultPageSize = pageSize;
        that.paginationUser.current = current;
      },
      //时间
      onChangeTime(date, dateString) {
        console.log(date, dateString);
      },
      //查询
      selectRepaired() {
        console.log('查询');
      },
      //清空
      removeRepaired() {
        console.log('清空');
      },
    }
  }
</script>

<style scoped>
  .imgS{
    width: 200px;
    height: 200px;
    background: #1890FF;
    margin: 10px
  }

</style>

